<template>
  
    <div class="container">
    <el-form :model="ruleForm" :rules="rules" hide-required-asterisk ref="rule" label-width="100px" class="demo-ruleForm">
        <h2>胖虎到家 - 后台管理</h2>
  <el-form-item label="账号" prop="username">
    <el-input prefix-icon='el-icon-user' v-model="ruleForm.username"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="password">
    <el-input prefix-icon='el-icon-lock' v-model="ruleForm.password"></el-input>
  </el-form-item>


  <el-form-item>
    <el-button type="primary" @click="submitForm('rule')">登录</el-button>
    <el-button @click="resetForm('rule')">重置</el-button>
  </el-form-item>
   </el-form> 


  </div>
</template>

<script>

export default {
    data() {
        return {
            ruleForm:{
                username:'admin',
                password:'123456' 
            },
            rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 6, message: '密码六位数', trigger: 'blur' }
          ],
        }
        } 
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            

            this.$http.post('user/login', this.ruleForm
            )
            .then(resp=>{
                
                if(resp.data.status==200){
                    this.$message.success('登陆成功')
                    sessionStorage.setItem('name',this.ruleForm.username)
                    this.$router.push('/shou')
                }else{
                    this.$message.error('账号或密码错误')
                }
            })






          } else {
            this.$message.error('登录失败')
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped="scoped">
 .container {
		height: 100vh;
		background-image: url('../assets/3.png') ;
        background-size: cover;
        background-repeat: no-repeat;
		overflow: hidden;
	}

	.el-form {
		width: 450px;
		margin: 150px auto;
		padding: 30px 50px;
		border-radius: 10px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background: rgba(255, 255, 255, 0.8);
        text-align: center;
	}

	h2 {
		text-align: center;
        margin-left: 80px;
	}
</style>